<template>
	<view class="page">
		<!-- 导航 -->
		<view class="nav-bar">
			<view class="nav-back flex-c-c">
				<u-icon name="list" size="55rpx"></u-icon>
			</view>
			<view class="nav-title flex-c-c">视频</view>
			<view class="nav-more flex-c-c">
				<u-icon name="plus-circle-fill" size="45rpx"></u-icon>
			</view>
		</view>

		<view class="content" v-for="(item,index) in rusult" :key="index" v-if="item.urlInfo"
			@click="playvideo(item.vid)">
			<view class="user-info" v-if="item.creator">
				<view class="avatar">
					<u-avatar :src="item.creator.avatarUrl"></u-avatar>
					<text class="avatar-text">{{item.creator.nickname}}</text>
				</view>
				<view class="follow-btn">
					<!-- <u-icon name="plus" color="red" size="25rpx"></u-icon>
					<text>关注</text> -->
				</view>
			</view>
			<video class="video" :src="item.urlInfo.url" enable-progress-gesture="false" :controls="false"
				:show-center-play-btn="false" :show-mute-btn="true" :poster="item.coverUrl" v-if="item.urlInfo">
			</video>
			<view class="message">
				<text class="title">{{item.title}}</text>
				<view class="fabulous">
					<u-icon name="thumb-up" size="50rpx"></u-icon>
					<text class="count">{{item.praisedCount}}</text>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" :loading-text="loadingText" :loading-icon="loadingIcon" />
	</view>
</template>

<script>
	import {
		_getRecommendVideo,
		_VideoCategory,
		_getGroup
	} from '@/http/community.js';

	export default {
		data() {
			return {
				rusult: [],
				loadStatus: 'loadmore',
				loadingIcon: 'circle',
				loadingText: '努力加载中',
				offset: 0,

			};
		},
		onReachBottom() {
			this.offset = this.offset + 1
			this.getRecommendVideo()
		},
		methods: {

			async getRecommendVideo() {
				const {
					datas = []
				} = await _getRecommendVideo(this.offset)
				datas.forEach((obj) => {
					this.rusult.push(obj.data)
				})

				console.log(this.rusult);
			},
			playvideo(vid) {
				console.log(vid);
				uni.navigateTo({
					url: '/view/VudioPlay/VudioPlay?id=' + vid
				})
			}


		},

		onLoad() {
			this.getRecommendVideo()
		}
	}
</script>

<style lang="scss" scoped>
	// .active {
	// 	background-color: #fd5f5f;
	// }

	.page {
		background-color: #f6f6f6;
		// height: 100vh;
	}

	.nav-bar {
		height: 90rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.nav-back,
		.nav-more {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.nav-title {
			flex: 1;
			text-align: center;
			font-size: 35rpx;
			font-weight: bold;
		}
	}

	.content {
		// padding: 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;

		.user-info {
			padding: 15rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.avatar {
				display: flex;
				align-items: center;

				.avatar-text {
					margin-left: 30rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}

	}


	.video {
		width: 100%;
		height: 350rpx;
	}

	.message {
		display: flex;
		align-items: center;
		padding: 15rpx 15rpx;

		.title {
			flex: 1;
			font-size: 30rpx;
		}

		.fabulous {
			width: 120rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;

			.count {
				font-size: 30rpx;
			}
		}
	}
</style>
